<template>
	<view>
		<!-- type="transparentFixed" -->
		<nav-bar>
			<view slot="left" class="search_box">
				<image class="search_icon" :src="searchIconUrl"></image>
				<input v-model="strInput" class="search_tip" placeholder="请输入位号查询" confirm-type="search" @confirm="onSearchClick"></input>
			</view>
			<view slot="right">
				<view class="right-text" @click="onCancelClick">取消</view>
			</view>
		</nav-bar>

		<view class="search-hisbase-lay" v-if="searchResList.length == 0">
			<view class="search-title-lay">
				<view>搜索历史</view>
				<image class="clear-icon" :src="clearUrl" @click="clearHis"></image>
			</view>

			<view class="search-his-lay">
				<view class="tag-view" v-for="(item,index) in searchHisList" :key="index" @tap="onInfoClick(item)">
					<uni-tag :text="item" />
				</view>
			</view>
		</view>


		<view class="search-resault-lay" v-if="searchResList.length != 0">
			<view class="search-tip">搜索到{{searchResList.length}}个结果</view>
			<view class="search-res-lay">
				<view class="search-view" v-for="(item,index) in searchResList" :key="index" @tap="onListItemClick(item)">
					<!-- <uni-tag :text="item.title" /> -->
					<view class="search-item-one">
						<view class="item-name">{{item.BitNumber}}</view>
						<view class="item-desc">{{item.Name}}</view>
					</view>
					<view class="item-cutoff"></view>
				</view>
			</view>
		</view>

		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
</template>

<script>
	import {
		SearchDoc,
		GetModelData
	} from '@/services/index.js';
	
	import CONSTS from '@/common/biz/consts.js'

	export default {
		data() {
			return {
				searchIconUrl: '/static/' + 'icon_search.png',
				changeIconUrl: '/static/' + 'icon_navigation_switch.png',
				messageIconUrl: '/static/' + 'icon_navigation_news.png',
				clearUrl: '/static/' + 'icon_delect.png',
				webviewStyles: {
					progress: {
						color: 'red'
					}
				},

				strInput: '',
				searchHisList: ["fsdafdas", "fsdaffdsaf"],
				// searchResShowing: false,

				searchResList: [],
				searchResTotal: 0,
				searchStr: '',
				searchPage: 0,

				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},

		onLoad() {
			this.searchHisList = this.getSearchHis();
		},

		onReachBottom() {
			// this.status = 'more';
			// this.doSearchByStr(this.searchStr, this.searchPage + 1);
		},

		methods: {
			onSearchClick() {
				if (this.strInput) {
					let index = this.searchHisList.indexOf(this.strInput);
					if (index < 0) {
						this.searchHisList.unshift(this.strInput);
						this.setSearchHis();
					} else {

					}

					this.searchStr = this.strInput;
					this.searchPage = -1;
					this.strInput = '';

					this.doSearchByStr(this.searchStr, this.searchPage + 1);
				}
			},

			onInfoClick(e) {
				this.strInput = e;
				this.onSearchClick();
			},

			onListItemClick(row) {
				// select row

				uni.showLoading({
					title: '加载中'
				});
				GetModelData({
						glid: '',
						BitNumber: row.DeviceName || row.BitNumber,
						MileageID: CONSTS.DEFAULT_MODEL_ID
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code == '000000') {
							let glids = ''
							if (res.data.glid.length > 1) {
								glids = res.data.glid.join('#')
							} else {
								glids = res.data.glid[0]
							}

							this.backToScene(glids, row.DeviceName || row.BitNumber);
						} else {
							uni.showToast({
								title: res.msg
							})
						}
					})
			},

			backToScene(inGlids, inBitNumber) {
				uni.$emit('search-bit', {
					glids: inGlids,
					bitNumber: inBitNumber,
				});
				uni.navigateBack({
					delta: 1
				})
			},

			onCancelClick() {
				uni.navigateBack({
					delta: 1
				});
			},

			getSearchHis() {
				let searchHis = uni.getStorageSync('search-position-his');
				return searchHis.split(",");
			},

			setSearchHis() {
				let strs = this.searchHisList.join(",");
				uni.setStorageSync('search-position-his', strs);
			},

			clearHis() {
				this.searchHisList = [];
				uni.setStorageSync('search-position-his', '');
				this.strInput = '';
			},

			doSearchByStr(str, page) {
				uni.showLoading({
					title: '加载中'
				})
				this.searchResList = [];
				SearchDoc({
					MileageID: CONSTS.DEFAULT_MODEL_ID,
					SearchKey: str,
				}).then((res) => {
					if (res.code == '000000') {
						let tempData = res.data.BitNumberData;
						this.searchResList = tempData;
					} else {

					}
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang='scss'>
	.page-header {
		height: 88upx;
		background-color: #2C405A;
		z-index: 1000;
	}

	.search_box {
		width: 550upx;
		height: 32px;
		background: rgba(0, 0, 0, 0.04);
		border-radius: 4px;
		filter: blur(0px);


		padding-left: 30upx;
		margin-left: 32upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.search_tip {
		height: 17px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		line-height: 17px;
	}

	.search_icon {
		width: 40upx;
		height: 40upx;
	}

	.right-text {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 20px;
		margin-right: 30upx;
	}

	.search-hisbase-lay {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		height: 90vh;
	}

	.search-title-lay {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 32upx;
	}

	.clear-icon {
		width: 56upx;
		height: 56upx;
		background: rgba(255, 255, 255, 0);
	}

	.search-his-lay {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	.tag-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		margin: 10rpx 15rpx;
		justify-content: center;
	}

	.search-resault-lay {
		background-color: #FFFFFF;
	}

	.search-tip {
		padding: 20upx;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 18px;
	}

	.search-view {}

	.search-item-one {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30upx;
	}

	.item-name {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.item-desc {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.item-cutoff {
		width: 95vw;
		height: 2upx;
		margin-left: 5vw;
		background-color: #D3D3D3;
	}
</style>
